<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script>
$(document).ready(function(){
    $result = $('.result'),
    $seat = $('.wrap .seat'),
    $colsHead = $('.wrap .colsHead'),
    $rowsHead = $('.wrap .rowsHead');
	// 행열 수 결정
    var colsNum = 10;
    var rowsNum = 10;
 	// 행 이름 그려준다
    for(makeTag = '', i = 1, leng = colsNum; i <= leng; i++) {
        makeTag += '<li>' + i + '</li>';
    }
    $colsHead.html(makeTag);
	// 열 이름 그려준다
    for(makeTag = '', i = 65, leng = 65 + rowsNum; i < leng; i++) {
        makeTag += '<li>' + String.fromCharCode(i) + '</li>';
    }
    $rowsHead.html(makeTag);
    $result.html('-');
	// 선택한 좌석에 열과 번호를 붙인 이름을 가져온다.
	var getSeatName = function( index ) {
	    var colsIndex = (index % colsNum) + 1,
	        rowsIndex = Math.ceil((index + 1) / colsNum) - 1,
	        rowsName = String.fromCharCode((65 + rowsIndex));
	    return rowsName + '열' + colsIndex + '번';
	};
	// 행열 이름 보여줄 문자열
    var makeTag = "";
	// 좌석 표 그려준다. 아래의 배열에 해당되는 좌석은 회색으로 나오며 선택 불가능하다.
	for(i = 1, leng = colsNum * rowsNum; i <= leng; i++) {
        if( i % colsNum === 1 ) {
            makeTag += "<li style='clear:both;'></li>";
        } else {
            makeTag += "<li></li>";
        }
    }
   $seat.html(makeTag);
    var select = [];
	$.ajax({
		type:"get",
		url:"${initParam.root}ticketing/getSeatInfoListByTimeNoAjax.do",
		data:"timeNo="+$("#setTimeNo").val(),
		dataType:"json",
		success:function(jsonData){
			$.each(jsonData, function(index, data){
				select[index] = data.info;
			});
			for(var i=0; i<colsNum*rowsNum; i++){
				for(var j=0;j<select.length;j++){
			        if(select[j]==getSeatName(i)){
			        	$(".wrap .seat li").eq(i).css("background", "gray");
			        }
				}
			}
		}
	});
	var selectedSeat = [];
	var adultNum = "${param.adultNum }";
	var stuNum = "${param.stuNum }";
	var num = Number(adultNum)+Number(stuNum);
	$(".wrap .seat li").toggle(function(){
		var index = $(this).index();
		for(var i=0;i<select.length;i++){
			if(select[i]==getSeatName(index)){
				return;
			}
		}
		if(selectedSeat.length==num){
			alert("선택한 인원수만큼 선택 가능합니다.");
			return;
		}
		selectedSeat.push(getSeatName(index));
		$(this).css("background", "#F39814");
		$result.html(selectedSeat.join(', '));
		$("input[name=seat]").val(selectedSeat.join(','));
	}, function(){
		var index = $(this).index();
		for(var i=0;i<select.length;i++){
			if(select[i]==getSeatName(index)){
				return;
			}
		}
		for(var i=0;i<selectedSeat.length;i++){
			if(selectedSeat[i]==getSeatName(index)){
				selectedSeat.splice(i, 1);
			}
		}
		$(this).css("background", "white");
		$result.html(selectedSeat.join(', '));
		$("input[name=seat]").val(selectedSeat.join(','));
	});
	$("#selectSeat").submit(function(){
		var seat = $("input[name=seat]").val();
    	var resultArr = seat.split(',');
    	if(resultArr.length!=num){
    		alert("선택한 인원수 만큼 좌석을 선택하세요!");
    		return false;
    	}
    });
});
</script>
<h3>티켓 예매</h3>
<hr align="left" width="150">
<center>
<table class="seatList">
	<tbody>
		<tr>
			<td width="640" style="background:skyblue; color:#fff;">좌석선택</td>
			<td width="200" style="background:skyblue; color:#fff;">선택한 영화 정보</td>
		</tr>
		<tr>
			<td align="center" height="10"><h2>screen</h2></td>
			<!-- 결과 화면 -->
			<td width="200px" align="left" rowspan="2">
				<form id="selectSeat" method="post" action="${initParam.root }ticketing/ticketing.do">
				<input type="hidden" name="memberEmail" value="${sessionScope.mvo.email}">
				<table>
					<tr>
						<td><span id="moviePoster"><img src="${initParam.root }${requestScope.allOrder.scheduleDateVO.showingVO.movieVO.posterPath}" width="200" height="250"></span></td>
					</tr>
					<tr>
						<td>영화:<span id="movieName">${requestScope.allOrder.scheduleDateVO.showingVO.movieVO.title}</span>
						<input type="hidden" name="movieNo" value="${param.movieNo}"></td>
					</tr>
					<tr>
						<td>극장:<span id="cinemaName">${requestScope.allOrder.scheduleDateVO.showingVO.cinemaVO.name}</span>
						<input type="hidden" name="cinemaNo" value="${param.cinemaNo}"></td>
					</tr>
					<tr>
						<td>날짜:<span id="datepicker">${requestScope.allOrder.scheduleDateVO.date}</span>
					</tr>
					<tr>
						<td>시간:<span id="setSchedule">${requestScope.allOrder.time}:00</span>
						<input type="hidden" id="setTimeNo" name="scheduleTimeVO.timeNo" value="${requestScope.allOrder.timeNo}"></td>
					</tr>
					<tr>
						<td>인원:
						<c:if test="${param.adultNum!=0 }">${param.adultNum}명(성인)</c:if> 
						<c:if test="${param.stuNum!=0 }">${param.stuNum}명(학생)</c:if>
						<input type="hidden" name="adultNum" value="${param.adultNum}">
						<input type="hidden" name="stuNum" value="${param.stuNum}"></td>
					</tr>
					<tr>
						<td>좌석:<span class="result">-</span>
						<input type="hidden" name="seat" value=""></td>
					<tr>
						<td>금액:<span id="totalMoney">${param.amount }</span>
						<input type="hidden" name="amount" value="${param.amount }"></td>
					</tr>
					<tr>
						<td align="center"><input type="submit" value="예매하기"></td>
					</tr>
				</table>			
				</form>
			</td>
		</tr>
		<tr>
			<td align="center" valign="top">
				<div class="wrap">
					<!-- 행 이름 보여줌 -->
    				<ul class="colsHead"></ul>
    				<!-- 열 이름 보여줌 -->
   					<ul class="rowsHead"></ul>
   					<!-- 좌석 선택화면 -->
				    <ol class="seat"></ol>
				</div>
			</td>
		</tr>
	</tbody>
</table>
</center>